<template>
    <div class="app-container customer-div">
      <!--新增培训-->
      <el-dialog
        :close-on-click-modal="false"
        title="培训记录"
        :visible.sync="dialogVisible4"
        width="440px">
        <el-form :model="pxForm" size="mini" label-width="90px" ref="pxForm" :rules="rules4">
          <el-form-item label="员工姓名：" prop="userId" v-if="source=='list'">
            <el-select v-model="pxForm.userId" filterable placeholder="请选择" clearable >
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="培训名称：" prop="trainName">
            <el-input v-model="pxForm.trainName"></el-input>
          </el-form-item>
          <el-form-item label="培训老师：" >
            <el-input v-model="pxForm.trainUserName"></el-input>
          </el-form-item>
          <el-form-item label="培训时间：">
            <el-date-picker
              style="width:100%"
              v-model="pxForm.time"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="培训学时：" >
            <el-input v-model="pxForm.trainHouse"></el-input>
          </el-form-item>
          <el-form-item label="培训成绩：">
            <el-input v-model="pxForm.trainAchievement"></el-input>
          </el-form-item>
          <el-form-item label="培训证书：" >
            <el-input v-model="pxForm.certificateName"></el-input>
          </el-form-item>
          <el-form-item label="证书编号：">
            <el-input v-model="pxForm.number"></el-input>
          </el-form-item>
          <el-form-item label="培训备注：">
            <el-input v-model="pxForm.remark"  type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose4">取 消</el-button>
          <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>
<script>
    import {addTrain,updateTrain} from '@/api/company'
    import {getOrderUsersList} from '@/api/partner'
    const defaultPXForm = {
      "userId": '',					//用户id
      "trainUserId": '',				//培训师id
      "trainUserName": "",			//培训人名称
      "number": '',					//证书编号
      "trainName": "",				//培训名称
      "trainHouse": '',				//培训时长
      "trainAchievement": '',			//培训成绩
      "certificateName": "",			//证书名称
      "remark": "",					//培训备注
      "startTrainTime": "",	//培训开始时间
      "endTrainTime": "",	//培训结束时间
      time:[]
    }
    export default {
        name: "gtpop",
        data(){

            return {
              pxForm:JSON.parse(JSON.stringify(defaultPXForm)),
              rules4:{
                userId:[{required: true, message: '此项必填', trigger: 'change'},],
                trainName:[{required: true, message: '此项必填', trigger: 'blur'},],
              },
              btnLoading4:false,
              popType4:'',
              dialogVisible4:false,
              source:'',
              userOptionList:[]
            }
        },
        computed: {

        },
        components : {

        },
        created() {
          this.getUserOptionList();
        },
        methods:{
          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
              this.userOptionList = res;
            })
          },
          //显示新增/编辑沟通记录
          showPop4(type,item,source){
            this.popType4 = type
            this.source = source;
            if(type == 'add'){
              this.pxForm = JSON.parse(JSON.stringify(defaultPXForm))
            }else{
              this.pxForm = JSON.parse(JSON.stringify(item))
              this.pxForm.time = [];
              if(item.startTrainTime){
                this.pxForm.time = [item.startTrainTime,item.endTrainTime]
              }
            }
            this.pxForm.userId = item.userId
            this.dialogVisible4 = true;
          },
          handleClose4(){
            this.dialogVisible4 = false;
          },
          handleConfirm4(){
            this.$refs.pxForm.validate((valid) => {
              if (valid) {
                this.btnLoading4 = true;
                let data = JSON.parse(JSON.stringify(this.pxForm));
                if(data.time.length > 0){
                  data.startTrainTime = data.time[0]
                  data.endTrainTime = data.time[1]
                }
                delete data.time;
                let fn;
                if(this.popType4 == 'add'){
                  fn = addTrain
                }else{
                  fn = updateTrain
                }
                fn(data).then(()=>{
                  this.btnLoading4 = false;
                  this.handleClose4();
                  this.$emit('getshowUserTrainList');
                }).catch(()=>{
                  this.btnLoading4 = false;
                })
              }
            })
          },

        },
    }
</script>

<style scoped lang="scss">

</style>
